<template>
    <div class="card-read">
        <!-- 头部 -->
        <div class="card-header">
            <div class="header-left" @click="back">
                <svg t="1635855361686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2375" width="128" height="128"><path d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z" p-id="2376"></path></svg>
            </div>
            <p class="tit">
                {{title}}
            </p>
        </div>

        <section class="contain-box" >
            <!-- 顶部图标 -->
            <div class="top-icon">
                <div class="icon-right" @click="turn()" ref="flip">
                    <svg t="1635904007165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7428" width="128" height="128"><path d="M867.340007 319.228555c-51.538817-51.534723-120.027677-79.890538-192.814423-79.890538H388.423497v-54.715159c0-17.449417-11.967566-23.99653-26.734898-14.519692l-131.680065 85.000929c-14.705933 9.533121-14.583137 24.802896 0.314155 34.022885l131.114177 81.201393c14.772448 9.225105 26.986631 2.430352 26.986631-15.018041v-54.524825H674.588005c116.408243 0 211.132628 94.785783 211.132628 211.133652 0 19.317974-2.552126 38.388309-7.66354 56.705489-4.550643 16.389272 5.048993 33.282011 21.438265 37.766139 2.743484 0.874927 5.481851 1.245364 8.225335 1.245364 13.459546 0 25.802666-8.971325 29.601179-22.493294 6.541997-23.743774 9.784854-48.363498 9.784854-73.163323 0-72.7847-28.355815-141.335982-79.766719-192.750979zM816.547181 734.829018l-131.052778-81.202417c-14.896268-9.218966-27.110451-2.490727-27.110451 15.020089v54.40612H349.535815c-116.41029 0-211.133651-94.723362-211.133652-211.132628 0-40.756239 11.653411-80.32749 33.653471-114.417913 9.224082-14.273075 5.106298-33.339316-9.100262-42.562374-14.273075-9.16166-33.339316-5.048993-42.500976 9.156544-28.478612 44.060495-43.561122 95.223758-43.561122 147.884118 0 72.849168 28.355815 141.27663 79.828117 192.748932 51.477418 51.538817 119.965256 79.893608 192.814424 79.893609h308.910558v54.716182c0 17.509792 12.028964 24.051789 26.734898 14.519692l131.680065-85.063351c14.705933-9.475815 14.583137-24.742521-0.314155-33.966603z" fill="" p-id="7429"></path></svg>
                </div>
            </div>
            <transition
                enter-active-class="animate__animated animate__flipInY">
                    <card-front  v-if="isOn" :obj="frontObj"></card-front>
                    <card-behind  v-if="!isOn" :obj="behindObj"></card-behind>
            </transition>
        </section>  

        <!-- 关系解读 -->
        <!-- 遮罩层 -->
        <transition 
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut" >
            <div class="mask" v-if="isShowRelative" >
            </div>
        </transition>
        <!-- 关系线 -->
        <div class="relation-list" ref="relation" v-if="haveRelative">
            <div class="toggle" @click="showOrhide_Relation">
                <svg ref="arrow" t="1636267864670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2385" width="128" height="128"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2386"></path></svg>            </div>
            <div class="relation" >
                <p class="tit">关系解读</p>
                <div class="relative" v-for="item in relations" :key="item.id" @click="goToCard(item.cardId)">
                    <div class="rel-left">
                        <p class="type">{{item.relation}}</p>
                        <p>{{item.cardName}}</p>
                    </div>
                    <div class="rel-right">
                        <div class="img-box">
                            <img :src="item.image" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

         <!--脚部  -->
        <footer class="card-footer">
            <div class="foot-choice" @click="comment">
                <svg t="1635839609552" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11272" width="128" height="128"><path d="M837.837971 15.246271c0 0-34.30411-34.30411-68.60822 0L68.729176 715.746846l-17.85362 17.85362 195.083459 195.131843 0 0 28.594822 28.594822 15.821501 15.821501 34.207343-34.207343-0.048384-0.048384L871.948546 391.478656l0.048384 0.048384 34.207343-34.207343-0.048384-0.048384 102.573644-102.573644c34.30411-34.30411 0-68.60822 0-68.60822L837.837971 15.246271zM290.230187 904.588795l-170.843178-170.843178L666.801258 186.282984l170.843178 170.843178L290.230187 904.588795zM871.851779 322.967203l-170.843178-170.843178 102.573644-102.573644 170.843178 170.843178L871.851779 322.967203z" p-id="11273"></path><path d="M66.213219 957.762586 102.210762 784.984056 50.29495 733.068244 0.024188 1024 290.326954 973.051865 274.553837 957.327131 246.007399 928.732309Z" p-id="11274"></path></svg>
                <span>{{opinionCount}}</span>
            </div>
            <div :class="['foot-choice',isCollected?'collected':'']"  @click="collect">
                <svg t="1636096567457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="128" height="128"><path d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z" p-id="2427" fill="#dbdbdb"></path></svg>                
                <span>{{collectionCount}}</span>
            </div>
            <div class="foot-choice">
                <svg t="1635839465089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9399" width="128" height="128"><path d="M921.76384 892.725248H99.534848V189.059072h434.843648v-40.96H58.574848v785.586176H962.72384V540.893184h-40.96z" fill="#2E333A" p-id="9400"></path><path d="M712.060928 90.820608v40.96h181.069824L366.60224 684.8l29.66528 28.243968L921.76384 161.10592v179.310592h40.96V90.820608z" fill="#2E333A" p-id="9401"></path></svg>
                <span></span>
            </div>
        </footer>
    </div>
</template>
<script>
import cardFront from '../components/card-front.vue'
import cardBehind from '../components/card-behind.vue'
export default {
    name:'cardRead',
    components:{
        cardFront,
        cardBehind
    },
    data(){
        return{
            id:"",
            isOn:true,
            title:"",
            opinionCount:0,
            collectionCount:0,
            relations:[],
            haveRelative:false,//是否有关系线
            isShowRelative:false,
            opinions:[],
            frontObj:{},
            behindObj:{},
            isCollected:false,
            timer:null,
            timer_2:null
        }
    },
    watch:{
        immediate: true,
        relations(newV,oldV){
            this.haveRelative =true;
            this.timer_2 =setInterval(()=>{
                clearInterval(this.timer_2);
                this.showOrhide_Relation();
            },2000)
        },
        // 侦听路由的变化
        $route(to,from){
            this.id= to.params.id;
            this.getData();
            this.haveRelative =false;
            this.isShowRelative=false;
        }
    },
    methods:{
        // 翻转卡片
        turn(){
            if(this.$refs.flip==undefined){
                return;
            }
            clearInterval(this.timer)
            this.isOn = !this.isOn;
            let el = this.$refs.flip;
            if(this.isOn==true){
                el.style["right"]="60px";
                el.style["top"]="3.4%";
            }else{
                el.style["right"]="6%";
                el.style["top"]="2%";
            }
        },
        // 返回
        back(){
            this.$router.go(-1)
        },
        //查看评论 
        comment(){
            this.$router.push({path:'/comment',query:{opinions:this.opinions,title:this.title}})
        },
        // 收藏卡片
        collect(){
            this.isCollected=!this.isCollected;
            if(this.isCollected){
                this.collectionCount++;
            }else{
                this.collectionCount--;
            }  
        },
        // 展示或隐藏关系解读
        showOrhide_Relation(){
            if(this.$refs.arrow==undefined || this.$refs.relation==undefined){
                return;
            }
            clearInterval(this.timer_2);
            this.isShowRelative = !this.isShowRelative;
            // 显示关系线
            if(this.isShowRelative){
                this.$refs.arrow.style['transform'] =`rotate(360deg)`
                this.$refs.relation.style.transform =`translateX(0)`
            }else{
                // 隐藏关系解读
                this.$refs.arrow.style['transform'] =`rotate(180deg)`
                this.$refs.relation.style.transform =`translateX(100%)`
            }
        },
        // 阅读其他卡片
        goToCard(_id) {
            this.$router.push({ path: `/card-read/${_id}`});
        },
        getData(){
            if(this.id.length==0){
            this.id= this.$route.params.id;
            }
            let url = `/data/id-${this.id}.json`
            axios.get(url)
            .then(
                res=>{
                    let data = res.data.resData;
                    this.title = data.title;
                    this.opinionCount = data.opinionCount;
                    this.collectionCount = data.collectionCount;
                    this.opinions = [...data.opinions];
                    let summary=data.summary;
                    // 记录卡片前面的数据
                    // 提供素材者
                    let [{nickname}]=data.material
                    this.frontObj={
                        imgUrl:data.image,
                        summary,
                        nickname
                    }
                    // 记录卡片后面的数据
                    this.behindObj={
                        summary,
                        words:data.words
                    };
                    if(data.relations.length>0){
                        this.relations = data.relations;
                    }
                }
            )
            .catch(
                err=>{
                    console.log(err);
                }
            )
        }
    },
    mounted(){
        this.getData();
        //设置1.2秒之后翻转卡片
        this.timer= setInterval(()=>{
            clearInterval(this.timer);
            this.turn();
        },1200)

    }
}
</script>
<style lang="scss" scoped>
$bodyCol:rgb(255,255,255s);
$maxWidth:645px;

.card-header{
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #ccc;
    align-items: center;
    .icon{
        width: 17px;
        height: 17px;
        vertical-align: middle;
        path{
            fill:#333
        }
    }
    .tit{
        flex-grow: 1;
        text-align: center;
        font-size: 17px;
    }
}
.contain-box{
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 53px;
    width: 100%;
    height: (100%-16);
    overflow-y: scroll;
    background-color: $bodyCol;
    .top-icon{
        .icon-right{
            position: absolute;
            top: 3.4%;
            right: 60px;
            z-index: 2;
            transition: all .5s linear;
            -webkit-transition: all .5s linear;
            svg{
                background-color: rgba($color: #000000, $alpha: .5);
                width: 16px;
                height: 16px;
                padding: 6px;
                border-radius: 50%;
                path{
                    fill:#fff;
                }
            }
        }
    }
    
}

.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: .3);
}
.relation-list{
    width: 50%;
    height: 85%;
    background-color: #fff;
    position: fixed;
    right: 0;
    top: 7%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    z-index: 100;
    transition: transform .5s linear;
    transform: translateX(100%);
    .toggle{
        content: "";
        width: 30px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #fff;
        position: absolute;
        right: 99%;
        top: 50%;
        transform: translateY(-50%);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: 1px solid rgb(90, 163, 145);
        border-right: 0;
        svg{
            width: 20px;
            height: 20px;
            transition:transform .5s ;
            transform: rotate(180deg);
            path{
                fill: rgb(90, 163, 145);
            }
        }
    }
    .relation{
        padding: 10px;
        box-sizing: border-box;
        .tit{
            font-size: 13px;
            color: rgb(90, 163, 145);
            letter-spacing: 1px;
            text-align: center;
            margin-bottom: 5px;
        }
        .relative{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            .rel-left{
                flex-grow: 1;
                p{
                    font-size: 12px;
                    padding-left: 5px;
                }
                .type{
                    color: #999;
                    border-bottom: 1px solid rgb(90, 163, 145);
                    position: relative;
                    &::after{
                        content: "";
                        width: 1px;
                        height: 65px;
                        background-color: rgb(90, 163, 145);
                        position: absolute;
                        top: 16px;
                        left: 0;
                    }
                }
            }
            .rel-right{
                .img-box{
                    width: 55px;
                    height: 55px;
                    background-color: #222;
                    overflow: hidden;
                    position: relative;
                    border-radius: 5px;
                    box-shadow: 0px 4px 5px 0 rgb(170, 166, 166),
                                3px 0px 5px 0 rgb(185, 183, 183),
                                -3px 0px 5px 0 rgb(185, 183, 183);
                }
                img{
                    width: 100%;
                    position: absolute;
                    top: -30%;
                    left: 0;
                }
            }

            &:last-child{
                .rel-left{
                    .type::after{
                        height: 0;
                    }
                }
            }
        }
    }
}

.card-footer{
    width: 100%;
    max-width: $maxWidth;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    .foot-choice{
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon{
            width: 16px;
            height: 16px;
            margin-right: 3px;
            vertical-align: middle;
            path{
                fill: #777;
            }
        }
        span{
            display: block;
            font-size: 12px;
            color: #888;
        }
        &.collected{
            svg{
                path{
                    fill: yellow;
                }
            }
        }
    }
}
</style>